<script setup lang='ts'>
import { reactive, ref } from 'vue';
import {
    DeletePlatformUsers,
    getAddpublicizeId,
    getCustomerlists,
    getPlatformUsers,
    getPublicizeId, getSearch
} from '@/api/home/home';

import { Search } from '@element-plus/icons-vue';
import { getCustomerShow } from '@/api/home/home';
import { ElMessage } from 'element-plus';

import { Plus } from '@element-plus/icons-vue';

import type { UploadProps } from 'element-plus';

const imageUrl = ref('');

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    imageUrl.value = response.fileName;
};

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {// imageUrl.value = '';

    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('图片必须是JPG格式!');
        return false;
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('图片大小不能超过2MB!');
        return false;
    }
    return true;
};
const dialogFormVisible = ref(false);
const dialogFormVisible1 = ref(false);
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: ''

});
const input = ref('');

const value2 = ref('');

const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setDate(start.getDate() - 7);
            return [start, end];
        }
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 1);
            return [start, end];
        }
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 3);
            return [start, end];
        }
    }
];

import type { FormInstance } from 'element-plus';
import { getToken } from '@/utils/auth';

const formRef = ref<FormInstance>();


const nameValidateForm = reactive({
    name: '',
    introduction: '',
    PersonBind: '',
    sort: 0,
    mien: ''

});
const nameValidateForm1 = reactive({
    name: '',
    introduction: '',
    PersonBind: '',
    sort: '',
    mien: '',
    mainPic: ''

});

//新增
//获取用户绑定
const value = ref('');
const options = ref([]);

getPlatformUsers().then(res => {
    console.log(res);
    (res as any).rows.map((item: any) => {
        options.value.push(item);

    });
    console.log(options.value);
});
let headers = reactive({ 'Authorization': 'Bearer ' + getToken() });
//新增接口
let data = ref({
    jsBusinessType: '',
    mainPic: '',
    contentRich: '',
    intro: '',
    sort: 0,
    title: ''


});

function addNew() {
    console.log('1');
    nameValidateForm.name = '';
    nameValidateForm.introduction = '';
    nameValidateForm.PersonBind = '';
    nameValidateForm.sort = 0;
    imageUrl.value = '';
}

function AddpublicizeId() {
    data.value.jsBusinessType = 'js_style';
    data.value.mainPic = imageUrl.value;
    data.value.contentRich = '<p>' + nameValidateForm1.introduction + '</p>';
    data.value.intro = nameValidateForm1.introduction;
    data.value.sort = Number(nameValidateForm1.sort);
    data.value.title = nameValidateForm1.name;
    console.log(data.value);
    getAddpublicizeId(data.value).then(res => {
        console.log(res);
    });
    reset();
    dialogFormVisible1.value = false;
}

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            AddpublicizeId();
            console.log('submit!');
            dialogFormVisible.value = false;
            dialogFormVisible1.value = false;
        } else {
            console.log('error submit!');
            return false;
        }
    });
};

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};

interface CustomerType {
    contactUserId: string;

    createdTime: string;

    delFlag: number;

    displaying: number;

    intro: string;
    isLike: number;

    jsBusinessType: string;

    likesNumber: number;

    mainPic: string;

    publicizeId: string;

    sort: number;

    title: string;

}

//渲染
let Customer = ref<CustomerType[]>([]);
getCustomerlists().then(res => {
    console.log(res);
    (res as any).rows.map((item: any) => {
        Customer.value.push(item);

    });
});

interface CustomerShow {
    publicizeId: number,
    jsBusinessType: string,
    displaying: number,
    mainPic: string,
    title: string,
    intro: string,
    sort: number,
}

let params = ref<CustomerShow>({
    publicizeId: 0,
    mainPic: '',
    displaying: 0,
    jsBusinessType: '',
    title: '',
    intro: '',
    sort: ''
});

//是否展示
function show(type) {
    type.displaying = !type.displaying;
    if (type.displaying === true) {
        type.displaying = 1;
    } else {
        type.displaying = 0;
    }
    params.value.publicizeId = type.publicizeId;
    params.value.jsBusinessType = type.jsBusinessType;
    params.value.mainPic = type.mainPic;
    params.value.displaying = type.displaying;
    getCustomerShow(JSON.stringify(params.value)).then(res => {
        console.log(res);
    });
}

//编辑
let edit = ref();

function CustomerEdit(item) {
    nameValidateForm.name = item.title;
    nameValidateForm.introduction = item.intro;
    nameValidateForm.PersonBind = item.createdBy;
    nameValidateForm.sort = item.sort;
    imageUrl.value = item.mainPic;
    getPublicizeId(item.publicizeId).then(res => {
        console.log(res);
    });
    edit.value = item;


}

function changeEnter() {
    console.log(edit.value);
    params.value.publicizeId = edit.value.publicizeId;
    params.value.jsBusinessType = edit.value.jsBusinessType;
    params.value.displaying = edit.value.displaying;
    params.value.title = nameValidateForm.name;
    params.value.intro = nameValidateForm.introduction;
    params.value.sort = nameValidateForm.sort;
    params.value.mainPic = imageUrl.value;
    getCustomerShow(JSON.stringify(params.value)).then(res => {
        // console.log(imageUrl.value);
        console.log(res);
        open2();
    });
    reset();

}

const open2 = () => {
    ElMessage({
        showClose: true,
        message: '操作成功',
        type: 'success'
    });
};

//删除
let DelData = ref({
    publicizeIdList: 0
});
import { ElMessageBox } from 'element-plus';

const open = (item) => {
    ElMessageBox.confirm(
        '此操作将会永久删除该数据，是否继续?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            deleteCustom(item);

            setTimeout(function() {
                reset();
            }, 100);
            ElMessage({
                type: 'success',
                message: '删除成功'
            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除'
            });
        });
};

function deleteCustom(item) {
    console.log(item.publicizeId);
    DelData.value.publicizeIdList = item.publicizeId;

    DeletePlatformUsers(DelData.value.publicizeIdList).then(res => {
        console.log(res);
    });

}

//搜索
let searchData = ref({
    title: '',
    timeRange: ''
});

function search() {
    searchData.value.title = input.value;
    searchData.value.timeRange = value2.value;
    console.log(searchData.value);
    getSearch(searchData).then(res => {
        console.log(res);
        Customer.value.length = 0;
        (res as any).rows.map((item: any) => {
            Customer.value.push(item);

        });
    });
}

//重置
function reset() {
    Customer.value.length = 0;
    getCustomerlists().then(res => {
        console.log(res);
        (res as any).rows.map((item: any) => {
            Customer.value.push(item);

        });
    });

}
</script>

<template>
    <div>
        <div class='header'>
            <div class='CustomerName'>
                姓名
                <el-input v-model='input' style='width: 400px' placeholder='请输入姓名' />
            </div>
            <div class='chooseDate'>
                <div class='block'>
                    <span class='demonstration' style='margin: 10px'>创建时间</span>
                    <el-date-picker
                        v-model='value2'
                        type='daterange'
                        unlink-panels
                        range-separator='到'
                        start-placeholder='起始时间'
                        end-placeholder='结束时间'
                        :shortcuts='shortcuts'
                        format='YYYY/MM/DD'
                        value-format='YYYY-MM-DD'

                    />
                </div>
            </div>
            <div style='margin-left: 20px;width: 100px;float: left'>
                <el-button @click='search' type='primary' :icon='Search'>搜索</el-button>

            </div>
            <div style='float: left'>
                <el-button @click='reset'>重置</el-button>
            </div>
        </div>
        <div>
            <el-button type='primary' style='margin: 20px' @click='addNew() ;dialogFormVisible1 = true;'>+新建
            </el-button>
            <el-dialog v-model='dialogFormVisible1' title='+新建' width='700'>
                <el-form
                    ref='formRef'
                    style='max-width: 600px'
                    :model='nameValidateForm1'
                    label-width='auto'
                    class='demo-ruleForm'
                >
                    <el-form-item
                        label='风采展示'
                        prop='image'
                        :rules="[
        { required: false, message: '请上传图像' },
        { type: 'string', message: '请输入' },
                 ]"
                    >
                        <el-upload
                            v-model='imageUrl'
                            class='avatar-uploader'
                            action='/dev-api/common/upload'
                            :show-file-list='false'
                            :on-success='handleAvatarSuccess'
                            :before-upload='beforeAvatarUpload'
                            :headers='headers'
                        >
                            <img v-if='imageUrl' :src='"/dev-api"+ imageUrl' class='avatar' />
                            <el-icon v-else class='avatar-uploader-icon'>
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item
                        label='姓名'
                        prop='name'
                        :rules="[
        { required: true, message: '请输入姓名' },
        { type: 'string', message: '请输入' },
                 ]">
                        <el-input
                            v-model='nameValidateForm1.name'
                            type='text'
                            autocomplete='off'
                        />
                    </el-form-item>
                    <el-form-item
                        label='简介'
                        prop='introduction'
                        :rules="[
        { required: true, message: '请输入简介' },
        { type: 'string', message: '请输入' },
                 ]">

                        <el-input
                            v-model.string='nameValidateForm1.introduction'
                            type='text'
                            autocomplete='off'
                        />
                    </el-form-item>
                    <el-form-item
                        label=' 人员绑定'
                        prop='value'
                        :rules="[
        { required: false, message: '请选择人员' ,trigger: 'change'},
        // { type: 'string', message: '请输入' },
                 ]">
                        <el-select
                            v-model='value'
                            clearable
                            placeholder='请选择'
                            style='width: 530px'
                        >
                            <el-option
                                v-for='item in options'
                                :key='item.userId'
                                :label='item.nickName'
                                :value='item.nickName'
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label=' 排序'
                        prop='sort'
                        :rules="[
        { required: true, message: '请输入序号' },
        { type: 0   , message: '请输入' },
                 ]">
                        <el-input
                            v-model.string='nameValidateForm1.sort'
                            type='text'
                            autocomplete='off'
                        />
                    </el-form-item>
                    <el-form-item style='margin-left: 80px ;width: 520px'>
                        <editor />
                    </el-form-item>
                    <el-form-item style='width: 200px;margin-left: 500px'>
                        <el-button type='primary' @click='submitForm(formRef);  '>确认</el-button>
                        <el-button @click='resetForm(formRef);dialogFormVisible1 = false'>取消</el-button>
                    </el-form-item>

                </el-form>
            </el-dialog>
        </div>
        <div style='margin-left: 15px' class='FirstList'>
            <ul style="margin-left: 93px">
                <li>姓名</li>
                <li>简介</li>
                <li>时间</li>
                <li>排序</li>
                <li>是否展示</li>
                <li>操作</li>
            </ul>
        </div>
        <div v-for='item in Customer.values()' :key='item.contactUserId ' class='CustomerLists'>
            <ul>
                <li>{{ item.title }}</li>
                <li>
                    <el-popover
                        placement='top-start'
                        :width='350'
                        trigger='hover'
                        :content=item.intro
                        effect='dark'
                    >
                        <template #reference>
                            <div
                                style=' white-space: nowrap; overflow: hidden; text-overflow: ellipsis;width: 175px;height: 43px;margin: auto;'
                                v-html=item.intro>
                            </div>

                        </template>
                    </el-popover>
                </li>
                <li>{{ item.createdTime }}</li>
                <li>{{ item.sort }}</li>
                <li>
                    <el-switch
                        :plain='true'
                        :model-value='item.displaying===1'
                        size='large'
                        @click='show(item); open2'
                    />
                </li>
                <li style='display: flex;justify-content: center;text-align: center ;color: #1c84c6'>
                    <div @click='CustomerEdit(item);dialogFormVisible = true' style='width: 50px'>编辑
                    </div>
                    <div @click='open(item) ' style='width: 50px'>删除</div>
                </li>
            </ul>
        </div>
        <el-dialog v-model='dialogFormVisible' title='编辑' width='700'>
            <el-form
                ref='formRef'
                style='max-width: 600px'
                :model='nameValidateForm'
                label-width='auto'
                class='demo-ruleForm'
            >
                <el-form-item
                    label='风采展示'
                    prop='mien'
                    :rules="[
        { required: false, message: '请上传图像' },
        { type: 'string', message: '请输入' },
                 ]"
                >
                    <el-upload
                        class='avatar-uploader'
                        action='/dev-api/common/upload'
                        :show-file-list='false'
                        :on-success='handleAvatarSuccess'
                        :before-upload='beforeAvatarUpload'
                        :headers='headers'
                    >
                        <img v-if='imageUrl' :src='"/dev-api"+ imageUrl' class='avatar' />
                        <el-icon v-else class='avatar-uploader-icon'>

                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item
                    label='姓名'
                    prop='name'
                    :rules="[
        { required: true, message: '请输入姓名' },
        { type: 'string', message: '请输入' },
                 ]">

                    <el-input
                        v-model.string='nameValidateForm.name'
                        type='text'
                        autocomplete='off'
                    />
                </el-form-item>
                <el-form-item
                    label='简介'
                    prop='introduction'
                    :rules="[
        { required: true, message: '请输入简介' },
        { type: 'string', message: '请输入' },
                 ]">

                    <el-input
                        v-model.string='nameValidateForm.introduction'
                        type='text'
                        autocomplete='off'
                    />
                </el-form-item>
                <el-form-item
                    label=' 人员绑定'
                    prop='value'
                    :rules="[
        { required: false, message: '请输入人员' },
        { type: 'string', message: '请输入' },
                 ]">
                    <el-select
                        v-model='value'
                        clearable
                        placeholder='请选择'
                        style='width: 530px'
                    >
                        <el-option
                            v-for='item in options'
                            :key='item.userId'
                            :label='item.nickName'
                            :value='item.nickName'
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    label=' 排序'
                    prop='sort'
                    :rules="[
        { required: true, message: '请输入序号' },
        { type: 'any', message: '请输入' },
                 ]">

                    <el-input
                        v-model.string='nameValidateForm.sort'
                        type='text'
                        autocomplete='off'
                    />
                </el-form-item>
                <el-form-item style='margin-left: 80px ;width: 520px'>
                    <editor />
                </el-form-item>
                <el-form-item style='width: 200px;margin-left: 500px'>
                    <el-button type='primary' @click='changeEnter();submitForm(formRef); '>确认</el-button>
                    <el-button @click='resetForm(formRef);dialogFormVisible = false'>取消</el-button>
                </el-form-item>

            </el-form>

        </el-dialog>
    </div>
</template>

<style scoped lang='scss'>
.header {

    width: 100%;
    height: 80px;
    border-bottom: 3px solid #f5f2f0;
    padding-top: 30px;
    padding-left: 30px;

    .CustomerName {
        float: left;
    }

    .chooseDate {
        float: left;
        margin-left: 20px;
    }
}

;
.CustomerLists {
    margin: auto;
    width: 1290px;
    height: 52px;
    line-height: 52px;
    font-size: 14px;
    color: rgb(96, 98, 102);

    ul {
        list-style: none;
        display: flex;

        li {
            width: 215px;
            height: 43px;
            color: #515a6e;
            text-align: center;
            line-height: 52px;
            font-size: 14px;

        }
    }
}

.CustomerLists:hover {
    background-color: #f1f1f1;
}

.FirstList {
    ul {
        margin: auto;

        list-style: none;
        display: flex;

        li {
            width: 215px;
            height: 43px;
            color: #515a6e;
            text-align: center;
            line-height: 43px;
            font-size: 13px;
            background-color: #f8f8f9;
        }

    }
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}


</style>


